<template>
    <MatchGround v-if="$store.state.pk.status === 'matching'" />
    <PlayGround v-if="$store.state.pk.status === 'playing'" />
    <ResultBoard v-if="$store.state.pk.loser !== 'none'"/> 
    <div class="user-color" v-if="$store.state.pk.status == 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.a_id)">左下角</div>
    <div class="user-color" v-if="$store.state.pk.status == 'playing' && parseInt($store.state.user.id) === parseInt($store.state.pk.b_id)">右上角</div>
</template>

<script>
import PlayGround from '../../components/PlayGround.vue'
import {onMounted, onUnmounted} from "vue"; // 分别为当组件被挂载，卸载后执行的函数
import { useStore } from 'vuex';
import MatchGround from "../../components/MatchGround.vue";
import ResultBoard from "@/components/ResultBoard.vue"

export default{
    components:{
        MatchGround,
        PlayGround,
        ResultBoard,
    },

    setup() {
        const store = useStore();
        const socketUrl = `wss://app2141.acapp.acwing.com.cn/websocket/${store.state.user.token}/`;
        store.commit("updateLoser", "none");
        store.commit("updateIsRecord", false);
        let socket = null;
        onMounted(() => {
            store.commit("updateOpponent", {
               username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            })
            socket = new WebSocket(socketUrl); // 获取后台websocket连接

            socket.onopen = () => { // 当连接成功建立后执行该函数

                store.commit("updateSocket", socket);
            },

            socket.onmessage = (msg) => { // 当接受到信息时执行该函数
                const data = JSON.parse(msg.data); // 接受到的后端返回信息放在msg的data里面
                if (data.event === "start-matching") { // 匹配成功
                    store.commit("updateOpponent", {
                        username: data.opponent_username,
                        photo: data.opponent_photo,
                    });

                    setTimeout(() => {
                        store.commit("updateStatus", "playing");
                    }, 200);

                    store.commit("updateGame", data.game);
                } else if (data.event === "move") {
                    const game = store.state.pk.gameObject;
                    const [snake0, snake1] = game.snakes; // 将game中的snake解构出来
                    snake0.set_direction(data.a_direction);
                    snake1.set_direction(data.b_direction);
                } else if (data.event === "result") {
                    console.log(data);
                    const game = store.state.pk.gameObject;
                    const [snake0, snake1] = game.snakes; // 将game中的snake解构出来

                    if (data.loser === "all" || data.loser === "A") {
                        snake0.status = "die";
                    }

                    if (data.loser === "all" || data.loser === "B") {
                        snake1.status = "die";
                    }

                    store.commit("updateLoser", data.loser);
                }
            },

            socket.onclose = () => { // 当关闭时执行该函数
                console.log("disconnected !! ");
            }
        });

        onUnmounted(() => { // 当前界面被关闭时
            socket.close(); // 断开连接
            store.commit("updateStatus", "matching");
        });
    }
}
</script>

<style scoped>
div.user-color {
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bolder;
}
</style>